<template>
  <div class="WorkingSchedule" v-loading="loading">
    <el-form
      ref="form"
      size="mini"
      :model="form"
      label-position="top"
      class="myform"
    >
      <div>
        <el-form-item label="下单时间">
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="form.order_time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
      </div>
      <div>
        <el-form-item style="margin-top: 30px">
          <el-button @click="onSearch" type="primary" size="mini"
            >查询</el-button
          >
          <!-- <el-button
            @click="onTendency"
            icon="iconfont icon-qushitutubiao"
            size="mini"
          >
            趋势图</el-button
          > -->
        </el-form-item>
      </div>
    </el-form>
    <!-- <el-table :data="tableBasics" style="width: 100%" border>
        <el-table-column prop="type_no" label="款号" align="center">
        </el-table-column>
        <el-table-column prop="img" label="样图" align="center">
          <template slot-scope="{ row }">
            <el-image
              :src="row.img"
              :preview-src-list="[row.img]"
              fit="contain"
              :lazy="true"
              style="width: 100px"
            ></el-image>
          </template>
        </el-table-column>
      </el-table> -->
    <div style="display:flex;">
      <div style="width:55%;margin-right: 40px;">
        <el-table size="mini" :data="tableData" style="width: 100%" border>
          <el-table-column label="下单时间" align="center" prop="order_time" width="200">
            <template slot-scope="{ row }">
              <div class="order_time">
                <div class="order_time-one" v-if="row.status == 1">首</div>
                <div class="order_time-two">{{ row.order_time }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="下单批次" align="center" prop="batch">
            <template slot-scope="{ row }">
              {{ row.batch ? row.batch : "--" }}
            </template>
          </el-table-column>
          <el-table-column label="XXS" align="center" prop="xxs">
            <template slot-scope="{ row }">
              {{ row.xxs ? row.xxs : "--" }}
            </template>
          </el-table-column>
          <el-table-column label="XS" align="center" prop="xs">
            <template slot-scope="{ row }">
              {{ row.xs ? row.xs : "--" }}
            </template>
          </el-table-column>
          <el-table-column label="S" align="center" prop="s">
            <template slot-scope="{ row }">
              {{ row.s ? row.s : "--" }}
            </template>
          </el-table-column>
          <el-table-column label="M" align="center" prop="m">
            <template slot-scope="{ row }">
              {{ row.m ? row.m : "--" }}
            </template>
          </el-table-column>
          <el-table-column label="L" align="center" prop="l">
            <template slot-scope="{ row }">
              {{ row.l ? row.l : "--" }}
            </template>
          </el-table-column>
          <el-table-column label="XL" align="center" prop="xl">
            <template slot-scope="{ row }">
              {{ row.xl ? row.xl : "--" }}
            </template>
          </el-table-column>
          <el-table-column label="XXL" align="center" prop="xxl">
            <template slot-scope="{ row }">
              {{ row.xxl ? row.xxl : "--" }}
            </template>
          </el-table-column>
          <el-table-column label="总数" align="center" prop="count">
          </el-table-column>
        </el-table>
        <pagination
          :form="form"
          :total="total"
          @paginationPostOrderTaskList="postAdminOperateFanorderdetail"
        />
      </div>
      <div style="width:30%">
        <div id="postponenum" class="echartsStyle"></div>
      </div>
      
    </div>

    <!-- <el-dialog :visible.sync="dialogVisible" width="30%" @open="open()" :close-on-click-modal="false">
      <div>
        <div id="postponenum" class="echartsStyle"></div>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import * as echarts from "echarts";
import { postponenum } from "./postponenum.js";
import {
  postAdminOperateFanorderdetail,
  postAdminOperateTrendchart,
} from "@/api";
import pagination from "@/components/pagination.vue";

export default {
  props: {
    type_no: "",
  },
  components: { pagination },
  data() {
    return {
      loading: false,
      downloadloading: false,
      dialogVisible: false,
      date: "",
      form: {
        type_no: "",
        order_time: "",
        page: 1,
        size: 10,
      },
      tableData: [],
      tableBasics: [],
      total: 1,
      trenddata: "",
    };
  },
  async mounted() {
    this.form.type_no = this.type_no;
    let form = this.form;
    this.postAdminOperateFanorderdetail(form);
    await this.postAdminOperateTrendchart();
    this.open();
  },
  methods: {
    // 趋势图
    async postAdminOperateTrendchart() {
      let obj = {
        type_no: this.form.type_no,
      };
      await postAdminOperateTrendchart(obj).then((res) => {
        console.log("趋势图", res);
        this.trenddata = res.data;
      });
    },
    // 延期数量柱状图
    postponenum(data) {
      let myChart = echarts.init(document.getElementById("postponenum"));
      // 绘制图表
      myChart.setOption(data);
    },
    open() {
      this.$nextTick(() => {
        //  执行echarts方法
        this.postponenum(postponenum(this.trenddata));
      });
    },
    // onTendency() {
    //   this.dialogVisible = true;
    // },
    // 采购列表
    async postAdminOperateFanorderdetail(data) {
      this.loading = true;
      this.form = data;
      let form = JSON.parse(JSON.stringify(this.form));
      if (form.order_time) {
        form.order_time = `${form.order_time[0]}/${form.order_time[1]}`;
      }
      postAdminOperateFanorderdetail(form)
        .then((res) => {
          this.loading = false;
          console.log("采购列表", res);
          this.tableData = res.data;
          this.total = Number(res.total);
          if (res.data.length) {
            this.tableBasics = [
              {
                type_no: res.data[0].type_no,
                img: res.data[0].img,
              },
            ];
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 搜索
    onSearch() {
      this.form.page = 1;
      this.form.size = 10;
      this.postAdminOperateFanorderdetail(this.form);
    },
  },
};
</script>

<style lang="scss" scoped>
.order_time {
  display: flex;
  align-items: center;
  justify-content: center;
  &-one {
    width: 22px;
    height: 22px;
    border: 1px solid #f56c6c;
    border-radius: 50%;
    color: #f56c6c;
    font-size: 12px;
    text-align: center;
    line-height: 22px;
    margin-right: 10px;
  }
}
.echartsStyle {
  width: 100%;
  min-height: 300px;
}
.myform {
  display: flex;
  justify-content: space-between;
  > div {
    display: flex;
  }
  &-item {
    margin-right: 10px;
  }
}
.WorkingSchedule {
  background: #ffff;
  padding: 20px;
  border-radius: 2px;
  @include boxShadow;
}
</style>
